<template>
  <div>
    <!-- 表头区域 -->
    <div class="appendix-form">
        <el-form  :inline="true" :model="consumers">
            <el-form-item label="省市区县">
                <el-input v-model="consumers.address" style="width: 230px" placeholder="省市区县"></el-input>
            </el-form-item>
            <el-form-item label="联系人">
                <el-input v-model="consumers.name" style="width: 230px" placeholder="联系人"></el-input>
            </el-form-item>
            <el-form-item label="具体地点">
                <el-input v-model="consumers.contact" style="width: 230px" placeholder="请具体地点查询"></el-input>
            </el-form-item>
        </el-form>
        <el-row class="appendix-btn">
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
            <el-button type="success" icon="el-icon-add" @click="dialogVisible = true">添加</el-button>
        </el-row>
        <el-dialog
          title="添加物资去处"
          :visible.sync="dialogVisible"
          width="40%"
          >
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
            <div style="display:flex">
              <el-form-item  label="省市" style="width:350px" :label-width="formLabelWidth" prop="region">
                <el-select v-model="ruleForm.region" placeholder="请选择省">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item  label="城市" :label-width="formLabelWidth"  prop="region">
                <el-select v-model="ruleForm.region" placeholder="请选择市">
                  <el-option label="区域er" value="shanghai"></el-option>
                  <el-option label="区域yi" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item  label="区县" :label-width="formLabelWidth" prop="region">
                <el-select v-model="ruleForm.region" placeholder="请选择区/县">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </div>
              <el-form-item label="联系人" :label-width="formLabelWidth" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="详细去处" :label-width="formLabelWidth" prop="resource">
                <el-input v-model="ruleForm.resource" type="textarea"></el-input>
              </el-form-item>
              <el-form-item label="电话" :label-width="formLabelWidth" prop="desc">
                <el-input v-model="ruleForm.desc"></el-input>
              </el-form-item>
              <el-form-item label="排序" :label-width="formLabelWidth" prop="num">
                <el-input-number v-model="ruleForm.num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </div>
        </el-dialog>
    </div>
      <!-- 表格 -->
    <el-table border stripe :data="consumersList" ref="multipleTable" style="width:1800px;margin: 20px 40px  10px 40px;">
       <el-table-column
       label="ID"
        type="index"
        width="50">
    </el-table-column>
      <el-table-column label="物资去向地址" width="350">
        <el-table-column label="省份" width="200">
          <template slot-scope="scope">
          {{ scope.row.province }}
        </template>
      </el-table-column>
        <el-table-column label="市" width="200">
          <template slot-scope="scope">
          {{ scope.row.city }}
        </template>
      </el-table-column>
        <el-table-column label="区县" width="200">
          <template slot-scope="scope">
          {{ scope.row.district }}
        </template>
      </el-table-column>
        <el-table-column label="地址" width="300">
          <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      </el-table-column>
     
      <el-table-column label="创建时间" width="200">
        <template slot-scope="scope">
          {{ scope.row.createTime}}
        </template>
      </el-table-column>
      <el-table-column label="联系人"  width="100">
        <template slot-scope="scope">
          {{ scope.row.contact}}
        </template>
         </el-table-column>
      <el-table-column label="电话"  width="150">
        <template slot-scope="scope">
          {{ scope.row.phone }}
        </template>
         </el-table-column>
      <el-table-column label="排序"  width="100">
        <template slot-scope="scope">
         {{ scope.row.sort }}
        </template>
      </el-table-column>
     
      <el-table-column label="操作"  >
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit">编辑</el-button>
          <el-button size="mini" type="text" @click="delete(scope.row.id)" icon="el-icon-delete">删除</el-button>
          
        </template>
      </el-table-column>
    </el-table>
                    <!-- 分页区域 -->
        <div class="pagination-container" style="margin: 20px 40px  10px 40px;">
            <el-pagination
                    layout="total,sizes,prev, pager, next,jumper"
                    :total="total"
                    :page-size="consumers.pageSize"
                    :current-page="consumers.pageNum"
                    :page-sizes="[10,15,20]"
                    @current-change="handlePageChange"
                    @size-change="handleSizeChange"
            >
            </el-pagination>
        </div>
  </div>
</template>

<script>
let consumers={
        pageSize:10,
        pageNum:1,
        address:"",
        name:"",
        contant:""
}
export default {
  data(){
    return{
       consumers: Object.assign({}, consumers),
      input:"",
      dialogVisible:false,

      ruleForm:{
        name: '',
        region: '',
        resource: '',
        desc: '',
        num:null,
      },
      rules:{
        name: [
            { required: true, message: '请输入联系人的名字', trigger: 'blur' },
            { min: 4, max: 8, message: '长度在 4 到 8 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择省市区县', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请输入物资去处名称', trigger: 'blur' }
          ],
          desc: [
            { required: true, message: '请输入联系方式', trigger: 'blur' }
          ],
          num: [
            { required: true, message: '请输入排序号', trigger: 'change' }
          ]
      },

      formLabelWidth:"80px",

      consumersList:[],
        total:null,
    }
  },
  created(){
    this.getconsumersList()
    console.log(this.consumersList)
  },
   methods:{
      //获取物资去处列表信息
      async getconsumersList(){
           let res =  await this.$http.get("/consumer/findConsumerList",{params:this.consumers});
        
          if(res.status===200){
            let getList = res.data.data.rows
            // this.consumersList = res.data.data.rows
            getList.forEach(item => {
               
                let addressList = item.address.split("/")
                item.province=addressList[0]
                item.city=addressList[1]
                item.district = addressList[2]
                this.consumersList.push(item)
            });
            this.total = res.data.data.total
            this.$message.success("获取物资去处列表信息成功")
          }else{
            this.$message.warning("获取物资去处列表信息失败")
          }
      },
            //页码变化
      handlePageChange(val){
       this.consumers.pageNum = val
       this.consumersList=[]
       this.getconsumersList()
      },
      //点击一页显示多少条
      handleSizeChange(val){
      this.consumers.pageSize = val
      this.consumers.pageNum = 1
      this.consumersList=[]
      this.getconsumersList()
      },
      //input框计算器改变事件
      handleChange(value) {
        console.log(value);
      },
      //搜索
      handleSearch(){
        this.consumersList=[]
        this.getconsumersList()
      }
    },

}
</script>

<style lang="less" scoped>
    .appendix-form{
        display: flex;
        width: 100%;
        margin: 20px 40px  10px 40px;
    }
    .appendix-btn{
        padding-left: 10px;
    }
</style>

